<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrapValidator.min.css">


    <style>
        .pageHeader {
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }

        #searchWords {
            width: 300px;
        }
        .contentTop {
            position: relative;
        }


        .contentBottom {
            margin-top: 25px;
        }

        .contentBottom table td
        ,.contentBottom table th{
            text-align: center;
        }
        td.operation a {
            text-decoration: none;
            display: inline-block;
            margin-right: 5px;
        }


        .pageBar {
            float: right;
        }

    </style>


</head>
<body>
<div class="container">
    <div class="row">
        <div class="pageHeader col-md-12">
            <h2>订单管理</h2>
        </div>


        <div class="content">
            <!-- 内容盒子上半部分-->
            <div class="contentTop col-md-8">
                <form class="form-inline">

                    <select class="form-control">
                        <option>按订单号称查询</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <div class="form-group">
                        <label for="searchWords"></label>

                        <input type="text" class="form-control" id="searchWords" placeholder=" 请输入关键词">

                    </div>
                    <button type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        查询</button>
                </form>


            </div>
            <!-- 内容盒子上半部分结束-->


            <!-- 内容盒子下半部分-->
            <div class="contentBottom col-md-12">
                <!-- 数据列表开始-->
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>订单号</th>
                        <th>下单用户</th>
                        <th>订单状态</th>
                        <th>订单总价</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>2017-12-03 19:10:17</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td class="operation">
                            <a class="showPage" href="javascript:" data-url="Mall/OrderDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                            <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                        </td>
                    </tr>


                    </tbody>
                </table>

                <!-- 数据列表end-->

                <!--分页开始-->
                <div class="pageBar">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- 分页end-->



        </div>
        <!-- end-->


    </div>
</div>





<script src="../js/jquery-2.1.1.js"></script>
<script src="../layer/layer.js"></script>

<script type="text/javascript">

    //jq 函数开始
    $(function () {

        showPageClickEvent();

        deleteClickEvent();



    });



    //查看链接点击
    function showPageClickEvent() {
        //点击“返回”按钮
        $(".showPage").on("click", function () {
            var $href = $(this).data("url");

            //获取父页面的iframe 元素，并且更改它的src地址
            $("#myIframe", window.parent.document).attr("src",$href);

        })
    }


    function deleteClickEvent() {
        $(".deleteLink").on("click",function() {
            var $this = $(this);
            layer.confirm("确定要删除这条数据吗？",{btn: ['确定','不！']},
                    function() {
                        //点击确定的时候走这里
                        // 发送异步请求到后台删除数据
                        //$.get("UnPast.ashx", { id: $(this).attr("stuid") }
                        //拿到回调函数
                        $this.parent().parent().fadeOut("slow");

                        layer.msg('删除成功！', {icon: 1,time:900});
                    })

        })
    }
</script>
</body>
</html>